<template>
    <div>
        <template v-for="(item, index) in menuList">
            <!--<Dropdown v-if="item.children.length !== 1" placement="right-start" :key="index" @on-click="changeMenu">-->
                <!--<Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">-->
                    <!--<Icon :size="20" :color="iconColor" :type="item.icon"></Icon>-->
                <!--</Button>-->
                <!--<DropdownMenu style="width: 200px;" slot="list">-->
                    <!--<template v-for="child in item.children">-->
                        <!--<DropdownItem :name="child.name" :key="child.title">-->
                            <!--<Icon :type="child.icon"></Icon>-->
                            <!--<span style="padding-left:10px;">{{ child.title }}</span></DropdownItem>-->
                    <!--</template>-->
                <!--</DropdownMenu>-->
            <!--</Dropdown>-->
            <Dropdown v-if="item.children.length" placement="right-start" :key="index" @on-click="changeMenu">
                <div @click="changeMenu(item.children[0].name)" style="width: 60px;padding:10px 0;text-align: center">
                    <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
                </div>
                <DropdownMenu style="width: 200px;" slot="list">
                  <template v-for="child in item.children">
                    <DropdownItem :name="child.name" :key="child.title">
                      <Icon :type="child.icon"></Icon>
                      <span style="padding-left:10px;">{{ child.title }}</span></DropdownItem>
                  </template>
                </DropdownMenu>
            </Dropdown>
        </template>
    </div>
</template>

<script>
  export default {
    name: 'sidebarMenuShrink',
    props: {
      menuList: {
        type: Array
      },
      iconColor: {
        type: String,
        default: 'white'
      }
    },
    data () {
      return {
        currentPageName: this.$route.name,
        openedSubmenuArr: this.$store.state.app.openedSubmenuArr
      };
    },
    computed: {
      tagsList () {
        return this.$store.state.app.tagsList;
      }
    },
    methods: {
      changeMenu (active) {
        if (active !== 'accesstest_index') {
          let pageOpenedList = this.$store.state.app.pageOpenedList;
          let openedPageLen = pageOpenedList.length;
          let i = 0;
          let tagHasOpened = false;
          while (i < openedPageLen) {
            if (active === pageOpenedList[i].name) {  // 页面已经打开
              this.$store.commit('moveToSecond', i);
              tagHasOpened = true;
              break;
            }
            i++;
          }
          if (!tagHasOpened) {
            let tag = this.tagsList.filter((item) => {
              if (item.children) {
                return active === item.children[0].name;
              } else {
                return active === item.name;
              }
            });
            tag = tag[0];
            tag = tag.children ? tag.children[0] : tag;
            this.$store.commit('inCreateTag', tag);
            localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList); // 本地存储已打开页面
          }
          this.$store.commit('setCurrentPageName', active);
          this.$router.push({
            name: active
          });
        }
      }
    },
    watch: {
      '$route' (to) {
        this.currentPageName = to.name;
        localStorage.currentPageName = to.name;
      }
    },
    mounted(){
    }
  };
</script>
